<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <!-- 线上图标路径 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1456778_ct57mue31dj.css">
    <link rel="stylesheet" href="css/shop.css">

    <!--引入jQueryCDN资源-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<!-- 顶部 -->
<div class="header">
    <span>< 返回</span>
    <span>购物车</span>
    <span>编辑</span>
</div>

<!-- 列表 -->
<div class="list">
    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_66.jpg" alt="图片">
        <div class="item-right">
            <p>金鸽瓜子280克</p>
            <p class="price">
                &yen;<span>8.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_33.jpg" alt="图片">
        <div class="item-right">
            <p>康师傅红烧牛肉面</p>
            <p class="price">
                &yen;<span>5.50</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_38.jpg" alt="图片">
        <div class="item-right">
            <p>太阳牌锅巴</p>
            <p class="price">
                &yen;<span>6.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_40.jpg" alt="图片">
        <div class="item-right">
            <p>vivo x60</p>
            <p class="price">
                &yen;<span>900.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_46.jpg" alt="图片">
        <div class="item-right">
            <p>蒙牛纯牛奶</p>
            <p class="price">
                &yen;<span>4.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_52.jpg" alt="图片">
        <div class="item-right">
            <p>徐福记沙琪玛</p>
            <p class="price">
                &yen;<span>18.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

</div>

<!-- 结算 -->
<div class="balance">
    <div class="balance-left">
        <input id="selectAllCheckbox" type="checkbox">
        <span>全选</span>
        <span><a class="deleteSelectedLink" href="javascript:void(0);" onclick="deleteSelectedItems()">删除</a></span>
    </div>
    <div class="balance-right">
        合计：<span id="totalPrice" style="color:red;">0.00</span>
        <button onclick="showCartInfo()">结算</button>
    </div>
</div>

<!-- 底部 -->

<div class="footer">
    <div class="footer-list">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-fenlei-copy"></i>
        <span>分类</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-tubiaolunkuo-"></i>
        <span>购物车</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
    </div>
</div>

<script>

    //购物车json对象。
    let cart={
        itemsList: [],
        totalPrice : 0.0
    };

    function showCartInfo(){
        console.log("-----------当前购物车信息------------");
        console.log(cart);
    }

    //获得prices节点的集合。
    //初始化购物车的总金额
    function initTotalPrice() {
        let itemNodes = $(".price");
        let totalPrice = 0;

        cart.itemsList = [];
        cart.totalPrice = 0.0;

        for (let i = 0; i < itemNodes.length; i++) {
            //console.log("当前元素是："+itemNodes[i]);
            //获得单价怎么获得。
            let price = parseFloat($($(itemNodes[i]).children("span")[0]).text());
            let buyNumber = $($($(itemNodes[i]).children("span")[1]).children("input")[0]).val();
            let name = $(itemNodes[i]).prev().text();
            let item = {
                'name': name,
                'price': price,
                'buyNumber': parseInt(buyNumber)
            }
            //把商品对象添加到购物车商品集合中
            cart.itemsList.push(item);
            totalPrice += price * buyNumber;
        }

        totalPrice = totalPrice.toFixed(2);
        //更新购物车对象的总金额
        cart.totalPrice = parseFloat(totalPrice);
        $("#totalPrice").text(totalPrice);
    }

    //增加购买数量
    function addBuyNumber(obj) {
        //寻找obj的前一个兄弟节点
        let num = parseInt($($(obj).prev()).val());
        if (num < 100) {
            num++;
        }
        $($(obj).prev()).val(num);
        initTotalPrice();  //重新计算购物车的总金额
    }

    //减少购买数量
    function subBuyNumber(obj) {
        //console.log('减少购买数量...')
        let num = parseInt($($(obj).next()).val());
        if (num > 1) {
            num--;
        }
        $($(obj).next()).val(num);
        initTotalPrice(); //重新计算购物车的总金额
    }

    //删除商品
    function deleteItem(obj) {
        $(obj).parent().parent().parent().parent().remove();
        initTotalPrice();
    }

    //删除选中的商品
    function deleteSelectedItems() {
        //判断一下是否是清空购物车。
        if ($("#selectAllCheckbox").prop("checked")) {
            $(".list").empty();
            $("#totalPrice").text('0.00');
            initTotalPrice();
        } else {
            $.each($(".selectAll"), (i, e) => {
                //console.log(e.checked);
                if (e.checked) {
                    $(e).parent().remove();
                    initTotalPrice();
                }
            })
        }
    }

    //给图片添加增加数量事件
    $(".addNum").click(function () {
        //console.log(this)
        addBuyNumber(this);
    })
    //给图片添加减少数量事件
    $(".subNum").click(function () {
        //console.log(this)
        subBuyNumber(this);
    })

    $(".deleteLink").click(function () {
        if (window.confirm("确认要删除该商品吗？")) {
            deleteItem(this);
        }
    })

    $("#selectAllCheckbox").click(function () {
        $(".selectAll").prop("checked", this.checked);
    })

    $(".selectAll").click(function () {
        //console.log('选中了checkbox...')
        $("#selectAllCheckbox").prop("checked", false);
    })

    initTotalPrice();

</script>
</body>
</html>

